<template>
	<view class="searchEmail" :class="APPTheme">
		<uni-nav-bar fixed status-bar left-icon="back" :color="APPTheme=='theme-light'?'#000000':'#ffffff'" :background-color="APPTheme=='theme-light'?'#ffffff':'#000000'" @clickLeft="clickLeftback">
			<view class="search-bar">
				<uni-search-bar radius="100" class="uni-search-bar" clearButton="always" placeholder="搜索" @confirm="searchFn" @input="inputFn"
				 @cancel="cancel" />
			</view>
		</uni-nav-bar>
		<view class="center">
			<uni-segmented-control :current="segmented.current" :values="segmented.items" @clickItem="onClickItem" style-type="text"
			 active-color="#0088fe" :border-color="APPTheme=='theme-light'?'#f0f0f0':'#1e1e1e'" flex="space-around"></uni-segmented-control>
			<view class="email-center u-skeleton">
				<view v-show="segmented.current === 0">
					<view class="center-list-item theme-bg theme-bg-active theme-border-bottom" @tap="navigateToFn(item)" v-for="(item,index) in checkbox.list" :key="index">
						<view class="item-left">
							<view class="icon">{{item.sendUser&&item.sendUser.slice(item.sendUser.length-2,item.sendUser.length)}}</view>
							<u-badge :is-dot="true" type="warning" v-show="item.isRead==0"></u-badge>
						</view>
						<view class="item-right">
							<view class="item-right-top">
								<view class="top-title lz-ellipsis-1">{{item.sendUser}}</view>
								<view class="top-date">{{item.sendTime}}</view>
							</view>
							<view class="item-right-center lz-ellipsis-1">
								{{item.mailSubject}}
							</view>
							<view class="item-right-bottom lz-ellipsis-1">
								{{item.mailContent}}
							</view>
						</view>
					</view>
					<u-empty text="暂无数据" v-if="checkbox.list.length==0" mode="data" :margin-top="250"></u-empty>
				</view>
				<view v-show="segmented.current === 1">
					<u-empty text="暂无数据" mode="data" v-if="checkbox.list.length==0" :margin-top="250"></u-empty>
				</view>
			</view>
		</view>
		
	</view>	
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components:{},
		data() {
			return {
				searchValue:'',//搜索值
				segmented: { //分段器
					current: 0,
					items: ['全部', '发件人', '主题','收件人'],
				},
				checkbox:{
					list:[],
				},
			}
		},
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api']),
		},
		onLoad(e) {
			that = this
		},
		onShow() {
			//设置主题颜色
			that.GLOBAL.setThemeColor(that.APPTheme)
		},
		methods: {
			//返回
			clickLeftback(){
				uni.navigateBack({
					delta: 1
				});
			},
			//查看详情
			navigateToFn(item){
				console.log(item.id);
				uni.navigateTo({
					url: '../seeEmail/seeEmail?id='+item.id,
					success: res => {
					},
					fail: () => {},
					complete: () => {}
				});
			},
			//搜索接口
			selectByCondition(){
				let req={
					mark:that.segmented.current,
					keyword:that.searchValue,
				}
				that.GLOBAL.doGet(that.api.GLOBAL_rest_vmail_mail_selectByCondition,req).then(res=>{
					if(res.code=='0'){
						that.checkbox.list=res.data
					}
				})
			},
			//搜索
			searchFn(res) {
				this.searchValue=res.value
			},
			inputFn(res) {
				this.searchValue=res.value
				this.selectByCondition()
			},
			onClickItem(e) {
				if (that.segmented.current !== e.currentIndex) {
					that.segmented.current = e.currentIndex
					this.selectByCondition()
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.searchEmail{
		height: 100%;
		.search-bar{
			width: 100%;
		}
		.center{
			.email-center{
				box-sizing: border-box;padding-bottom: 45px;
				.center-list-item{
					display: flex;padding:10px 15px;align-items: center;line-height: 20px;box-sizing: border-box;width: 100%;
					.item-left{
						width:40px;height: 40px;padding: 10px;display: flex;align-items: center;justify-content: center;position: relative;
						.icon{
							width:100%;height: 100%;border-radius:50%;background-color: #0794ff;display: flex;justify-content: center;align-items: center;font-size: 12px;color: #ffffff;
						}
					}
					.item-right{
						padding: 5px;font-size: 14px;box-sizing: border-box;width: 570rpx;
						.item-right-top{
							display: flex;justify-content: space-between;
							.top-title{
								max-width: 300rpx;
							}
							.top-date{
								color: #888;font-size: 10px;
							}
						}
						.item-right-bottom{
							color: #888;font-size: 12px;
						}
					}
				}
			}
		}
	}
</style>
